<template>
<!-- <audio controls="controls" :src="`http://localhost:4000/song/url?id=${item.id}`"></audio> -->
<div class="playmusic">
    <img :src="state.songdetail.al.picUrl" alt="" class="bg">
    <div class="top">
        <div class="top-left">
            <!-- 回退按钮 -->
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
        </div>
        <div class="top-center">{{state.songdetail.name}}</div>
        <div class="top-right">
            <!-- 分享按钮 -->
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-fenxiang-"></use>
            </svg>
        </div>
    </div>
    <div class="content">
        <div class="content-center animate__fadeOut" >
            <transition>
                <div class="content-center-film" v-if="!changecenter">
                <!-- 放歌的轴，播放时放到胶片上，暂停时离开胶片（要做个动画？） -->
                <!-- <transition name="axis" appear> -->
                <img class="axis" :class="rotate?'dowm':'up'" @click="start" src="../assets/images/axis.png" alt="">
                <!-- </transition> -->
                <!-- 胶片 没有主页图片的时候就用这个默认的胶片 -->
                    <img class="film" src="../assets/images/film.png" alt="" @click="changeMusicWord">
                </div>
            </transition>
            <transition>
                <div class="content-center-musicwords" v-if="changecenter" @click="changeMusicWord">
                <p v-for="(item,i) in state.musicWords.split(/\n/igs)" :key="i"> {{item}}</p>
                <!-- {{state.musicWords}} -->
                </div>
            </transition>
            
        </div>
        <div class="content-bottom">
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-aixin"></use>
            </svg>
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-xiazai"></use>
            </svg>
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-yinle"></use>
            </svg>
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-liaotian"></use>
            </svg>
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-diandiandianshu"></use>
            </svg>
        </div>
    </div>
    <div class="bottom">
        <div class="top"></div>
        <div class="bottom">
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-fenxiang-"></use>
            </svg>
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-xiangzuo2"></use>
            </svg>
            <svg class="icon" aria-hidden="true" @click="playAudio" v-if="fangma">
                <use xlink:href="#icon-bofang1"></use>
            </svg>
            <svg class="icon" aria-hidden="true" @click="pusedAudio" v-if="!fangma">
                <use xlink:href="#icon-zanting"></use>
            </svg>
            
            <audio ref="audioRef" controls :src="` https://music.163.com/song/media/outer/url?id=${musicId}.mp3`"
            style="display: none"
            />
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-xiangyou2"></use>
            </svg>
            <svg class="icon" aria-hidden="true" >
                <use xlink:href="#icon-liebiao2"></use>
            </svg>
        </div>
    </div>
</div>
</template>

<script>
import { reactive, ref ,onBeforeMount,onMounted,computed} from 'vue'
import { useRoute } from 'vue-router'
import {getMusicDetail,getMusicWords} from '../api/index'
export default {
    setup() {
        //获取audio
        const audioRef = ref(null);
        console.log(audioRef)
        onMounted(()=>{
            console.log(audioRef.value)
            console.log(audioRef.value.paused)
        });

        //播放
        let fangma = ref(true)
        const playAudio = function(){
            console.log(audioRef.value.play())
            if(audioRef.value.paused){
                // audioRef.value.paused=false;
                audioRef.value.play()
            }
            this.fangma = !this.fangma;
            console.log(fangma)
            // audioRef.value.play()
        }

        //暂停
        const pusedAudio = function(){
            console.log(audioRef.value.pause())
            if(audioRef.value.play){
                // audioRef.value.paused=false;
                audioRef.value.pause()
            }
            fangma = true
            this.fangma = !this.fangma;
            // audioRef.value.play()
        }

        //那个轴
        let rotate=ref(false)
        const start = function(){
            this.rotate = !this.rotate;
            console.log(this.rotate);
        }

        //获取搜索歌词界面传过来的歌词id
        const route = useRoute();
        let musicId=route.query.id;

        let state = reactive({
            songdetail:[],
            musicWords:[]
        });
        
        //获取歌曲详情
        let res =getMusicDetail(musicId).then((res)=>{
            state.songdetail = res.data.songs[0]
            console.log(state.songdetail.al.picUrl)
        })
        //   console.log(result);

        //获取歌词
        let resu = getMusicWords(musicId).then((res)=>{
            state.musicWords = res.data.lrc.lyric;
        })
        
        //切换磁盘和歌词
        let changecenter = ref(false);
        const changeMusicWord = function(){
            this.changecenter = !this.changecenter;
        }

        return {
            musicId,
            rotate,
            state,
            audioRef,
            changecenter,
            fangma,
            changeMusicWord,
            playAudio,
            pusedAudio,
            start
        }
    }
}
</script>

<style lang="less" scoped>
body{
    margin: 0;
    padding-top: 0.2rem;
}
.playmusic{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.36);
    padding-top: 0;
    .bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        filter:blur(40px)
    }
    .icon{
        color: #bbb;
        width: 0.8rem;
    }
    .top{
        font-size: 0.26rem;
        height: 1rem;
        display: flex;
        .top-center{
            color: #fff;
            line-height: 1rem;
            font-size: 0.36rem;
            text-align: center;
            flex: 1;
        }
    }
    .content{
        position: relative;
        top: 0.4rem;
        height: 6rem;
        .content-center{
            height: 3.6rem;
            position: relative;
            .content-center-film{
                height: 3.6rem;
                position: relative;
                .axis{
                position: absolute;
                left: 3rem;
                width: 1.6rem;
                z-index: 1;
            }
                .film {
                    position: relative;
                    top: 50%;
                    left: 1.8rem;
                    width: 3.6rem;
                    border-radius: 50%;
                }
            }
            .content-center-musicwords{
                color: #bbb;
                text-align: center;
            }
            // .axis-enter-active{
            //     annimation:axismove 0.5s linear;
            // }
            // .axis-leave-active{
            //     annimation:axismove 0.5s linear reverse;
            // }
            // @keyframes axismove {
            //     from{
            //         transform:translateX(-100%);
            //     }
            //     to{
            //         transform:translateX(0rem);
            //     }
            // }
        }
        .content-bottom{
            position: absolute;
            width: 7.5rem;
            top: 7.8rem;
            display: flex;
            justify-content: space-between;
        }
    }
    .bottom{
        position: relative;
        top:2.2rem;
        width: 7.5rem;
        display: flex;
        justify-content: space-between;
        .bottom{
            display: flex;
            audio{
                display: flex;
                flex: 1;
            }
        }
    }
}
.down {
    transform: rotate(30deg);
    transition: all 2s;
}
.up{
    transform-origin:top left;
    transform: rotate(-30deg);
    // transition: all  2s;
}
</style>
